<script>
export default {
  name: 'MyMessage',
  data: function () {
    return {
      activeId: 1,
      messageList: [
        {
          fromUser: {
            nickName: '哔哩哔哩创作中心',
            headPicture: require('../assets/img/head_picture2.jpg')
          },
          messList: [
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '好的', type: 0 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '好的', type: 0 }
          ]
        },
        {
          fromUser: {
            nickName: '哔哩哔哩创作中心',
            headPicture: require('../assets/img/head_picture2.jpg')
          },
          messList: [
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '好的', type: 0 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '好的', type: 0 }
          ]
        },
        {
          fromUser: {
            nickName: '哔哩哔哩创作中心',
            headPicture: require('../assets/img/head_picture2.jpg')
          },
          messList: [
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '好的', type: 0 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '好的', type: 0 }
          ]
        },
        {
          fromUser: {
            nickName: '哔哩哔哩创作中心',
            headPicture: require('../assets/img/head_picture2.jpg')
          },
          messList: [
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '好的', type: 0 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '好的', type: 0 }
          ]
        },
        {
          fromUser: {
            nickName: '哔哩哔哩创作中心',
            headPicture: require('../assets/img/head_picture2.jpg')
          },
          messList: [
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '好的', type: 0 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '好的', type: 0 }
          ]
        },
        {
          fromUser: {
            nickName: '哔哩哔哩创作中心',
            headPicture: require('../assets/img/head_picture2.jpg')
          },
          messList: [
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '好的', type: 0 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '好的', type: 0 }
          ]
        },
        {
          fromUser: {
            nickName: '哔哩哔哩创作中心',
            headPicture: require('../assets/img/head_picture2.jpg')
          },
          messList: [
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '好的', type: 0 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '好的', type: 0 }
          ]
        },
        {
          fromUser: {
            nickName: '哔哩哔哩创作中心',
            headPicture: require('../assets/img/head_picture2.jpg')
          },
          messList: [
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '好的', type: 0 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '好的', type: 0 }
          ]
        },
        {
          fromUser: {
            nickName: '哔哩哔哩创作中心',
            headPicture: require('../assets/img/head_picture2.jpg')
          },
          messList: [
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '好的', type: 0 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '好的', type: 0 }
          ]
        },
        {
          fromUser: {
            nickName: '哔哩哔哩创作中心',
            headPicture: require('../assets/img/head_picture2.jpg')
          },
          messList: [
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '好的', type: 0 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '好的', type: 0 }
          ]
        }, {
          fromUser: {
            nickName: '哔哩哔哩创作中心',
            headPicture: require('../assets/img/head_picture2.jpg')
          },
          messList: [
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '好的', type: 0 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '好的', type: 0 }
          ]
        },
        {
          fromUser: {
            nickName: '哔哩哔哩创作中心',
            headPicture: require('../assets/img/head_picture2.jpg')
          },
          messList: [
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '好的', type: 0 },
            { content: '【拍摄周刊第二期】海贼王上映啦！来试试专属特效吧！投稿就有海贼头像框哦w(ﾟДﾟ)w传送门：网页链接', type: 1 },
            { content: '好的', type: 0 }
          ]
        }

      ]
    }
  },
  methods: {

  }
}
</script>
<template>
  <div class="my-message">
    <el-container class="height:100%;">
      <!-- left -->
      <el-aside width="250px"
                class="left">
        <div class="left-title">最近消息</div>
        <div class="recent-mess-div">
          <div v-for="(message,idx) in messageList"
               :class="activeId===idx?'recent-mess-active':'recent-mess'"
               :key="idx">
            <div class="head-picture">
              <el-avatar :src="message.fromUser.headPicture"
                         :size="42"></el-avatar>
            </div>
            <div class="nick-name">
              {{message.fromUser.nickName}}
            </div>
          </div>
        </div>
      </el-aside>
      <!-- main -->
      <el-main style="padding-top:0px;padding-bottom:0px;">
        <div class="nick-name-title">{{messageList[activeId-1].fromUser.nickName}}</div>
        <div class="communication-record">

        </div>
        <div class="communication">

        </div>
      </el-main>
    </el-container>
  </div>
</template>
<style scoped>
@import "../assets/css/common.css";
.my-message {
  display: flex;
  background-color: #fff;
  border-radius: 4px;
  flex-direction: column;
  margin-top: 10px;
  height: 700px;
  overflow-y: auto;
}
.left {
  border-right: solid 1px #eee;
  height: 100%;
  overflow: hidden;
}
.left-title {
  padding: 5px;
  padding-left: 10px;
  display: flex;
  color: #666666;
  font-size: 14px;
  border-bottom: solid 1px #eee;
}
.recent-mess-div {
  height: 650px;
  overflow-y: auto;
}
.recent-mess {
  display: flex;
  align-items: center;
  height: 80px;
  cursor: pointer;
}
.recent-mess:hover {
  background: #e4e5e6;
}
.recent-mess-active {
  display: flex;
  align-items: center;
  background: #e4e5e6;
  height: 80px;
  cursor: pointer;
}
.head-picture {
  padding: 10px;
}
.nick-name {
  color: #222;
  font-size: 16px;
}
.nick-name-title {
  padding: 5px;
  font-size: 14px;
  color: #222;
  border-bottom: solid 1px #eee;
}
.communication-record {
}
.communication {
  background: #fff;
  height: 165px;
  /* box-shadow: 0 0 5px 1px rgba(158, 179, 193, 0.5); */
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 8px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  /* -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3); */
  border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(251, 114, 153, 0.5);
  /* -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5); */
}
</style>
